import React, { useState, useRef, useEffect } from "react";
import { Radio,Select  } from "antd";
import * as echarts from "echarts";
import { getTotalBar, getTotalLine, getTotalRadar } from "../services/total";

const plainOptions = ["折线图", "柱状图", "雷达图"];

function Total() {
    const myChart = useRef(null);
    const [value, setValue] = useState("折线图");
    useEffect(() => {
        showChart();
    }, []);
    const handleChange = ({ target: { value: v } }) => {
        setValue(v);
        showChart(v);
    };
    const handleChangeDay = (optionValue) => {
        showChart(value,optionValue);
    }
    const lineOption = (xAxisData, seriesData) => ({
        xAxis: {
            type: "category",
            data: xAxisData,
        },
        tooltip: {
            trigger: "axis",
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: seriesData,
                type: "line",
            },
        ],
    });
    const barOption = (xAxisData, seriesData) => ({
        tooltip: {},
        xAxis: {
            data: xAxisData,
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                data: seriesData,
            },
        ],
    });
    const radarOption = (indicatorData, seriesData) => ({
        title: {
            text: "评测报告图",
        },
        radar: {
            indicator: indicatorData,
        },
        series: [
            {
                name: "报告",
                type: "radar",
                data: seriesData,
            },
        ],
    });
    const showChart = async (type = "折线图" ,value = 30) => {
        echarts.dispose(myChart.current);
        let chart = echarts.init(myChart.current);
        // 绘制图表
        if (type == "折线图") {
            let { xAxisData, seriesData } = await getTotalLine(value);
            chart.setOption(lineOption(xAxisData, seriesData));
        } else if (type == "柱状图") {
            let { xAxisData, seriesData } = await getTotalBar();
            chart.setOption(barOption(xAxisData, seriesData));
        } else if (type == "雷达图") {
            let { indicatorData, seriesData } = await getTotalRadar();
            chart.setOption(radarOption(indicatorData, seriesData));
        }
    };
    return (
        <div>
            <Radio.Group
                options={plainOptions}
                onChange={handleChange}
                value={value}
                optionType="button"
            />
            <div>
            {value== '折线图' ? <Select
                defaultValue="近30天"
                style={{ width: 120 }}
                onChange={handleChangeDay}
                options={[
                    {
                        value: 30,
                        label: "近30天",
                    },
                    {
                        value: 60,
                        label: "近60天",
                    },
                    {
                        value: 6,
                        label: "近半年",
                    },
                    {
                        value: 12,
                        label: "近一年",
                    },
                ]}
            /> : ''}
            </div>
            <div
                style={{ width: "90%", height: 400, marginTop: 50 }}
                id="myChart"
                ref={myChart}
            ></div>
        </div>
    );
}

export default Total;
